<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import resize from '@/mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'radar'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '200px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      const legendData = ['黄色预警', '橙色预警', '红色预警'] //图例
      const indicator = [
        {
          text: '华东地区',
          max: 6000
        },
        {
          text: '华南地区',
          max: 5000
        },
        {
          text: '华北地区',
          max: 5000
        },
        {
          text: '华中地区',
          max: 5000
          //  axisLabel: {show: true, textStyle: {fontSize: 18, color: '#333'}}
        },
        {
          text: '西南地区',
          max: 5000
        },
        {
          text: '西北地区',
          max: 5000
        },
        {
          text: '东北地区',
          max: 5000
        }
      ]
      const dataArr = [
        {
          value: [4300, 4700, 3600, 3900, 3800, 4200],
          name: legendData[0],
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#4A99FF'
                // shadowColor: '#4A99FF',
                // shadowBlur: 10,
              },
              shadowColor: '#4A99FF',
              shadowBlur: 10
            }
          },
          areaStyle: {
            normal: {
              // 单项区域填充样式
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: '#4A99FF'
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(0,0,0,0)'
                  },
                  {
                    offset: 1,
                    color: '#4A99FF'
                  }
                ],
                globalCoord: false
              },
              opacity: 1 // 区域透明度
            }
          }
        },
        {
          value: [3200, 3000, 3400, 2000, 3900, 2000],
          name: legendData[1],
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#4BFFFC'
                // shadowColor: '#4BFFFC',
                // shadowBlur: 10,
              },
              shadowColor: '#4BFFFC',
              shadowBlur: 10
            }
          },
          areaStyle: {
            normal: {
              // 单项区域填充样式
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: '#4BFFFC'
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(0,0,0,0)'
                  },
                  {
                    offset: 1,
                    color: '#4BFFFC'
                  }
                ],
                globalCoord: false
              },
              opacity: 1 // 区域透明度
            }
          }
        }
      ]
      const colorArr = ['#4A99FF', '#4BFFFC'] //颜色
      // let that = this
      this.chart = this.$echarts.init(this.$el)

      this.chart.setOption({
        color: colorArr,
        title: {
          text: '气温预警覆盖范围',
          textStyle: {
            color: '#fff',
            fontSize: 14
          },
          x: 'center'
        },
        legend: {
          orient: 'vertical',
          icon: 'circle', //图例形状
          data: legendData,
          bottom: 10,
          right: 0,
          itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ]
          itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]
          itemGap: 5, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
          textStyle: {
            fontSize: 12,
            color: '#00E4FF'
          }
        },
        radar: {
          // shape: 'circle',
          center: ['50%', '60%'],
          radius: '60%',
          name: {
            textStyle: {
              color: '#fff',
              fontSize: 12
            }
          },
          indicator: indicator,
          splitArea: {
            // 坐标轴在 grid 区域中的分隔区域，默认不显示。
            show: true,
            areaStyle: {
              // 分隔区域的样式设置。
              color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'] // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
            }
          },
          axisLine: {
            //指向外圈文本的分隔线样式
            lineStyle: {
              color: '#1D6B86'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#1D6B86', // 分隔线颜色
              width: 1 // 分隔线线宽
            }
          }
        },
        series: [
          {
            type: 'radar',
            symbolSize: 8,
            // symbol: 'angle',
            data: dataArr
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.radar {
  position: relative;
  z-index: 999;
}
</style>
